<template>
	<view class="emain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}" ><!--  -->
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}" ><!--  -->
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">编辑搭子卡</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="px-1 mt-6 pb-5">
			<view class="px-3 pt-3 pb-5" style="background-color: #15325B;border-radius: 36rpx;">
				<view class="d-flex d-flex-middle mb-5">
					<image class="rounded mr-1" :src="gameIcon" style="width: 30rpx;height: 30rpx;"></image>
					<text class="colorfff font26">{{gameName}}</text>
					<image class="position-absolute" @click="deletecard" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%88%A0%E9%99%A4.png" style="right: 21px;color: white;width: 26rpx;height: 26rpx;"  ></image>
				
				</view>
				<view style="margin-bottom: 55rpx;">
					<textarea class="font50 font-bold colorfff" style="width: 670rpx;" @input="checkLength" v-model="textareaContent" placeholder="填写您的交友宣言, 例 00 女,想找一个男生组队,情绪稳定随时能打,拒绝次抛队友,玩的滴滴"></textarea>
					
				</view>
				<view class="p-2 d-flex d-flex-middle position-relative mb-4" style="background: #1e3767;border-radius: 30rpx;height: 200rpx;">
					<view class="mr-4 d-flex d-flex-center d-flex-middle" style="width: 250rpx;height: 200rpx;">
						<view class="charts-box">
						  <qiun-data-charts 
						    type="radar"
							:reshow="true"
						    :opts="opts"
						    :chartData="chartData"
						  />
						</view>
					</view>
					<view class="d-flex d-flex-column">
						<view class="font-bold color739bce mb-1 ">{{character? this.topic : '测一测我的交友战力！'}}</view>
						<view class="font22 color597bac text-clamp-three" style="margin-bottom: 25rpx;">{{character? character : '重新测评在72小时后，请认真填写哦'}}</view>
						<view v-if="!character" class="bgC7C8C9 rounded30 d-flex d-flex-middle" @click="gotoTestPage">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/edite1088.png" style="width: 58rpx;height: 58rpx;"></image>
							<text class="colorfff font22">立即测试</text>
						</view>
					</view>
				</view>
				<view class="d-flex d-flex-baseline mb-2">
					<text class="font32 colorfff mr-2">添加照片</text>
					<text class="font22 colorg7">晒出最能代表你特点的照片吧！</text>
				</view>
				<view class="d-flex d-flex-between mb-4">
					<view class="plus-img d-flex d-flex-center d-flex-middle" style="position: relative;"  @click="addimg(1)">
						<image v-if="img1" class="plus-img" :src="img1"  mode="aspectFill"></image>
						<view v-if="img1" class="delete-btn"  @click.stop="removeImage(1)" ><image style="    width: 40rpx;height: 41rpx;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" ></image></view>
						<text v-else  class="iconfont icon-jia1 "></text>
						
						
					</view>
					<view class="plus-img d-flex d-flex-center d-flex-middle" style="position: relative;" @click="addimg(2)">
						<image  v-if="img2" class="plus-img"   :src="img2" mode="aspectFill"></image>
						<view v-if="img2" class="delete-btn"  @click.stop="removeImage(2)" ><image style="    width: 40rpx;height: 41rpx;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" ></image></view>
						<text v-else  class="iconfont icon-jia1" ></text>
					</view>
					<view class="plus-img d-flex d-flex-center d-flex-middle"  style="position: relative;" @click="addimg(3)">
						<image v-if="img3" class="plus-img" :src="img3" mode="aspectFill"></image>
						<view v-if="img3" class="delete-btn"  @click.stop="removeImage(3)" ><image style="    width: 40rpx;height: 41rpx;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" ></image></view>
						<text v-else  class="iconfont icon-jia1" ></text>
					</view>
				</view>
				
				<!-- <view class="d-flex d-flex-between d-flex-middle mb-2">
					<view class="d-flex d-flex-baseline">
						<text class="font32 colorfff mr-1">交友目的</text>
						<text class="font22 colorg7">（多选）</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="font20 colorg7 mr">展开</text>
						<text class="font20 colorg7 iconfont icon-right-circle-down-copy"></text>
					</view>
				</view> -->
				<!-- <view class="d-flex d-flex-wrap mb-2">
					<view class="xuanzhe">人皮话多</view>
					<view class="xuanzhe">情绪稳定</view>
					<view class="xuanzhe onxz">有趣灵魂</view>
					<view class="xuanzhe">全能高手</view>
				</view> -->
				<view v-for="(record, index) in purpose" :key="index">
				<view class="d-flex d-flex-between d-flex-middle mb-2">
					<view class="d-flex d-flex-baseline" >
						<text class="font32 colorfff mr-1">{{ record.name }}</text>
						
					</view>
					
				</view>
				<view class="d-flex d-flex-wrap mb-2">
					<view class="xuanzhe" :class="selectedPurpose.some(selectedItem => selectedItem.id === item.id) ? 'onxz' : ''" v-for="(item,index) in record.items" :key="index" @click="choosePurpose(item,record.name)">{{item.name}}</view>
					
				</view>
				</view>
				<!-- <view class="d-flex d-flex-between d-flex-middle mb-2">
					<view class="d-flex d-flex-baseline">
						<text class="font32 colorfff mr-1">区服</text>
						<text class="font20 colorg7">（多选）</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="font22 colorg7 mr">展开</text>
						<text class="font20 colorg7 iconfont icon-right-circle-down-copy"></text>
					</view>
				</view>
				<view class="d-flex d-flex-wrap mb-5">
					<view class="xuanzhe">人皮话多</view>
					<view class="xuanzhe">情绪稳定</view>
					<view class="xuanzhe onxz">有趣灵魂</view>
					<view class="xuanzhe">全能高手</view>
				</view>
				
				
				 -->
				 <view class="d-flex d-flex-center">
				 	<view class="btn-edit d-flex d-flex-center d-flex-middle rounded50" @click="config()">
				 		<text class="colorfff font32">发布搭子卡</text>
				 	</view>
				 </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	import { DaziApi } from "../../http/Dazi";
	import { goodsApi } from "../../http/goodsApi";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				chartData: {},
				gameName:'',
				gameId:'',
				character: '',
				img1:null,
				img2:null,
				img3:null,
				card:null,
				purpose:[],
				id:null,
				topic: null,
				postParam:{},
				Echarts: [60,60,80,70,90],
				selectedPurpose:[],
				gameIcon:'',
				deleteParam:{},
				textareaContent:null,//游戏卡内容
				opts: {
					color: ["#9A60B4","#ea7ccc","#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452"],
					padding: [0,0,0,0],
					dataLabel: false,
					enableScroll: false,
					width:100,
					height:100,
					fontSize: 10,
					
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#334c7c",
							gridCount: 3,
							opacity: .6,
							max: 10,
							fontSize:10,
							labelShow: true,
							border: false,
						},
					}
				}
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 20) {
				this.bgcolor = '#74749c'
			}else{
				this.bgcolor = 'transparent'
			}
			
		},
		onReady() {
			this.getServerData()
		},
		onLoad(options) {
			this.gameId = options.gameId;
			this.getCard(options.id);
			this.getFilter();
		},
		methods: {
			async editCard(param){
				let res=await DaziApi.editCard(param);
				console.log(res);
				
			},
			async deleteCard(){
				let res=await DaziApi.deleteCard(this.deleteParam);
			},
			deletecard(){//删除搭子卡
			uni.showModal({
			  
			  content: '确认要删除游戏搭子卡吗？',
			  success: (res) => {
			    if (res.confirm) {
			      // console.log('用户点击确定');
			      // 清除内容
					this.deleteParam.id=this.id;
					this.deleteCard();
					
			      uni.navigateBack({
			      	url:"pages/user/user"
			      });
			    } else if (res.cancel) {
										 
			      // console.log('用户点击取消');
			      // 不执行任何操作，用户取消退出
			    }
			  }
			});
			
				
			},
			async getFilter(){
				const id=this.gameId;
				const param = {
					gameId:id
				}
				// this.filterParam.Gameld=this.gameId;
				let res=await goodsApi.queryGamesFilter(param);
				let recods=res.items;
				this.purpose=recods;
				console.log(this.purpose);
			},
			async getCard(id){
				let param={
					id: id
				}
				let res = await DaziApi.queryDetail(param);
				this.card = res;
				this.initCardData(res);
				this.card.gameId=this.gameId;
			},
			checkLength(event){//限制字数
				if (this.textareaContent.length == this.maxLength) {
					console.log(2113214);
					
					uni.showToast({
					    title: '已到达最大字数',
					    icon: 'none', // 使用'none'图标，只显示文字
					    duration: 2000 // 显示持续时间
					  });
					event.preventDefault();
					}
			},
			getSelectedPurposeIds(name) {// 筛选出 name 为 "交友目的" 的项，并返回一个由逗号分隔的 id 字符串
			    return this.selectedPurpose
			      .filter(selectedItem => selectedItem.typeName === name) // 过滤出 name 为 "交友目的" 的项
			      .map(selectedItem => selectedItem.id) // 提取 id
			      .join(','); // 合并成逗号分隔的字符串
			  },
			  getSelectedPurposeNames(name) {// 筛选出 name 为 "交友目的" 的项，并返回一个由逗号分隔的 id 字符串
			      return this.selectedPurpose
			        .filter(selectedItem => selectedItem.typeName === name) // 过滤出 name 为 "交友目的" 的项
			        .map(selectedItem => selectedItem.name) 
			        .join(','); // 合并成逗号分隔的字符串
			    },
			config(){
				 if(this.textareaContent==null||this.textareaContent==''){
				        uni.showToast({
				            title: '你还没有输入内容',
				            icon: 'none',
				            duration: 2000
				        });
				        return;
				    }
				    
				    if(this.character==''){
				        uni.showToast({
				            title: '你还没有完成交友测试',
				            icon: 'none',
				            duration: 2000
				        });
				        return;
				    }
				    
				    if(this.img1==''&&this.img2==''&&this.img3==''){
				        uni.showToast({
				            title: '你还没有上传图片',
				            icon: 'none',
				            duration: 2000
				        });
				        return;
				    }
				
				    // 只构建新添加或修改的数据
				    const newData = {};
				    
				    // 添加必要的ID字段
				    newData.id = this.id;
				    newData.gameId = this.gameId;
				   
				    // 检查并添加修改的字段
				    if (this.textareaContent !== this.card.remark) {
				        newData.remark = this.textareaContent;
				    }
				    
				    // 处理图片变化
				    if (this.img1 !== this.card.screenshot1) {
				        newData.screenshot1 = this.img1;
				    }
				    if (this.img2 !== this.card.screenshot2) {
				        newData.screenshot2 = this.img2;
				    }
				    if (this.img3 !== this.card.screenshot3) {
				        newData.screenshot3 = this.img3;
				    }
				    
				    // 处理选择项的变化
				    const newMakeFriendsId = this.getSelectedPurposeIds("交友目的");
				    if (newMakeFriendsId !== this.card.makeFriendsId) {
				        newData.makeFriendsId = newMakeFriendsId;
				        newData.makeFriends = this.getSelectedPurposeNames("交友目的");
				    }
				    
				    const newDistrictServerId = this.getSelectedPurposeIds("区服类型");
				    if (newDistrictServerId !== this.card.districtServerId) {
				        newData.districtServerId = newDistrictServerId;
				        newData.districtServer = this.getSelectedPurposeNames("区服类型");
				    }
				    
				    const newGameLevelId = this.getSelectedPurposeIds("段位名称");
				    if (newGameLevelId !== this.card.gameLevelId) {
				        newData.gameLevelId = newGameLevelId;
				        newData.gameLevelName = this.getSelectedPurposeNames("段位名称");
				    }
				    
				    const newOnlineTimeId = this.getSelectedPurposeIds("在线时间");
				    if (newOnlineTimeId !== this.card.onlineTimeId) {
				        newData.onlineTimeId = newOnlineTimeId;
				        newData.onlineTime = this.getSelectedPurposeNames("在线时间");
				    }
				    
				    const newPersonalityTypeId = this.getSelectedPurposeIds("搭子类型");
				    if (newPersonalityTypeId !== this.card.playerStyleId) {
				        newData.playerStyleId = newPersonalityTypeId;
				        newData.playerStyle = this.getSelectedPurposeNames("搭子类型");
				    }
				    
				    // 处理图表数据变化
				    const newExtra = this.Echarts.join(',');
				    if (newExtra !== this.card.extra) {
				        newData.extra = newExtra;
				    }
				    
				    // 如果有修改的数据，则发送请求
				    if (Object.keys(newData).length > 1) { // 大于1是因为id字段是必须的
				        console.log('发送修改的数据：', newData);
				        this.editCard(newData);
				        
				        uni.showToast({
				            title: '修改成功',
				            icon: 'none',
				            duration: 1000
				        });
				        
				        setTimeout(() => {
				            uni.navigateBack({
				                delta: 1
				            });
				        }, 1000);
				    } else {
				        uni.showToast({
				            title: '未做任何修改',
				            icon: 'none',
				            duration: 2000
				        });
				    }
			},
			removeImage(i){//移除图片
				if(i==1){
					this.img1='';
				}else if(i==2){
					this.img2='';
				}else if(i==3){
					this.img3='';
				}
			},
			initCardData(data) {
				console.log(data);
				// 基本信息
				this.id=data.id;
				this.gameIcon=data.icon;
				
				this.gameId = data.gameId;
				this.gameName = data.gameName;
				this.textareaContent = data.remark;
				this.character = data.playerAbilityReport;
				
				// 图片
				this.img1 = data.screenshot1;
				this.img2 = data.screenshot2;
				this.img3 = data.screenshot3;
				this.topic= data.abilityTopic;
				// 图表数据
				if (data.extra) {
					this.Echarts = data.extra.split(',').map(Number);
					this.getServerData();
				}
				
				// 选中项
				this.selectedPurpose = [];
				
				// 处理各种选择项
				  if (data.makeFriendsId) {
						// 只取第一个选项
						const id = data.makeFriendsId.split(',')[0];
						const name = data.makeFriends.split(',')[0];
						this.selectedPurpose.push({
							id: id,
							name: name,
							typeName: "交友目的"
						});
					}
				
					if (data.districtServerId) {
						// 只取第一个选项
						const id = data.districtServerId.split(',')[0];
						const name = data.districtServer.split(',')[0];
						this.selectedPurpose.push({
							id: id,
							name: name,
							typeName: "区服类型"
						});
					}
				
				if (data.gameLevelId) {
					this.selectedPurpose.push({
						id: data.gameLevelId,
						name: data.gameLevelName,
						typeName: "段位名称"
					});
				}
				
				if (data.onlineTimeId) {
					// 只取第一个选项
					const id = data.onlineTimeId.split(',')[0];
					const name = data.onlineTime.split(',')[0];
					this.selectedPurpose.push({
						id: id,
						name: name,
						typeName: "在线时间"
					});
				}
				if (data.personalityTypeId) {
					this.selectedPurpose.push({
						id: data.playerStyleId,
						name: data.playerStyle,
						typeName: "搭子类型"
					});
				}
				console.log(this.selectedPurpose);
			},
			choosePurpose(item, name) {
				// 对所有类型都使用单选逻辑
				// 移除同类型的旧选项
				this.selectedPurpose = this.selectedPurpose.filter(i => i.typeName !== name);
				// 添加新选项
				this.selectedPurpose.push({ 
					id: item.id, 
					name: item.name, 
					typeName: name 
				});
				console.log('当前选中项：', this.selectedPurpose);
			},
			
			goBack(){
				manner.goBack()
			},
			
			addimg(i){
				
			
				const vm = this;
				
				
				        uni.chooseImage({
				        	count: 1, //默认9
				        	sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				        	sourceType: ['album'], //从相册选择
				        	success:(res) =>{
								
								if (res.tempFilePaths.length > 0) {
								            let img = res.tempFilePaths[0];
								            console.log(img); 
											vm[`img${i}`] = img;
											// vm.opts.img1 =img
										console.log(`img${i}`,vm[`img${i}`]);
								
														
				        	}
				        }
						
				    })
				
				
			},
			getServerData() {
			  setTimeout(() => {
			    let res = {
			        categories: ["素质","情绪","技术","热情","综合"],
			        series: [
			          {
			            name: "",
			            data: this.Echarts
			          }
			        ]
			      };
			    this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
		},
		 
	}
</script>

<style scoped>
	.delete-btn {
	  position: absolute;
	   opacity: 0.75;
	 top: 6rpx;
	    right: -17rpx;
		left: 140rpx;
	  width: 40rpx; /* 增加圆的尺寸 */
	  height: 40rpx; /* 增加圆的尺寸 */
	  background-color: white;
	  display: flex; /* 使用Flexbox布局 */
	  justify-content: center; /* 水平居中 */
	  align-items: center; /* 垂直居中 */
	  border-radius: 50%; /* 圆形 */
	  cursor: pointer;
	}	
.emain{
	/* background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/maskbg.png'); */
	/* background-repeat: no-repeat; */
	/* background-size: cover; */
	/* background-position: 0 100%; */
	background: #74749c;
	min-height: 100vh;
	position: relative;
}
.charts-box {
	width: 300rpx;
	height: 300rpx;
}
.color739bce{color:#739bce}
.color597bac{color:#597bac}
.bgC7C8C9{background: #4b5f87;width: 170rpx;}
.plus-img{
	width: 180rpx;
	height: 180rpx;
	border-radius: 36rpx;
	
	background-color: #1e3767;
	   overflow: scroll;
	color: #385fa5;
}
.colorg7{
	color: rgba(255, 255, 255, .5)
}
.xuanzhe{
	border: 1px solid #C7C8C9;
	border-radius: 30rpx;
	padding:10rpx 20rpx;
	color: #ffffff;
	font-size: 26rpx;
	margin-right: 19rpx;
	margin-bottom: 20rpx;
}
.onxz{
	background: #CFF0FB;
	color: #46C4FF;
}
.btn-edit{
	background-image: linear-gradient(to right, #e65fd0, #69adf8);
	height: 90rpx;
	width: 430rpx;
}
</style>

